---
title: RoundedBox
sourcecode: src/core/RoundedBox.tsx
---

A box buffer geometry with rounded corners, done with extrusion.

```jsx
<RoundedBox
  args={[1, 1, 1]} // Width, height, depth. Default is [1, 1, 1]
  radius={0.05} // Radius of the rounded corners. Default is 0.05
  steps={1} // Extrusion steps. Default is 1
  smoothness={4} // The number of curve segments. Default is 4
  bevelSegments={4} // The number of bevel segments. Default is 4, setting it to 0 removes the bevel, as a result the texture is applied to the whole geometry.
  creaseAngle={0.4} // Smooth normals everywhere except faces that meet at an angle greater than the crease angle
  {...meshProps} // All THREE.Mesh props are valid
>
  <meshPhongMaterial color="#f3f3f3" wireframe />
</RoundedBox>
```

Geometry is also available. Useful for '@react-three/csg'

```jsx
<mesh>
  <RoundedBoxGeometry
    args={[1, 1, 1]}
    radius={0.05}
    steps={1}
    smoothness={4}
    bevelSegments={4}
    creaseAngle={0.4}
  />
  <meshPhongMaterial color="#f3f3f3" wireframe />
</mesh>
```

> **Tip:** If you animate `args` every frame, memoise the
> `[width, height, depth]` tuple with `React.useMemo` to avoid replacing the
> geometry each tick.